const { useState } = require("react");

/*
 * @Author: Wxx
 * @Date: 2022-02-22 11:12:38
 * @LastEditors: Wxx
 * @LastEditTime: 2022-02-22 11:20:49
 * @Description:
 */
function ToDoList() {
  const [text, setText] = useState("");
  const [list, setList] = useState([]);
  const handleChange = (e) => {
    setText(e.target.value);
  };
  const handleAdd = () => {
    setList([...list, text]);
    setText("");
  };
  const huandleDel = (index) => {
    var newList = [...list];
    newList.splice(index, 1);
    setList(newList);
  };
  return (
    <div>
      <input value={text} onChange={handleChange} />
      <button onClick={handleAdd} style={{ marginLeft: 16 }}>
        add
      </button>
      <ul>
        {list.map((item, index) => (
          <li key={item} style={{ marginTop: 16 }}>
            {item}
            <button
              onClick={() => huandleDel(index)}
              style={{ marginLeft: 16 }}
            >
              del
            </button>
          </li>
        ))}
      </ul>
      {list.length === 0 && <div>暂无数据</div>}
    </div>
  );
}
export default ToDoList;
